<template>
  <grimm-page type="popup-view" title="Popup">
    <template slot="content">
      <div>
        <grimm-popup type="my-popup" block v-model="visible1">default popup</grimm-popup>
        <grimm-button block @click="showPopup(1)">Show Popup</grimm-button>
      </div>
      <div>
        <grimm-popup type="my-popup" block v-model="visible2" :mask="false">no mask</grimm-popup>
        <grimm-button block @click="showPopup(2)">Show Popup - no mask</grimm-button>
      </div>
      <div>
        <grimm-popup
          type="my-popup"
          v-model="visible3"
          :mask="false"
          content="<i>这是一段 html</i>"
          ref="myPopup3"
        ></grimm-popup>
        <grimm-button block @click="showPopup(3)">custom content</grimm-button>
      </div>
      <div>
        <grimm-popup
          type="my-popup"
          v-model="visible4"
          :position="position"
          :mask-closable="true"
          ref="myPopup4"
        >change position popup</grimm-popup>
        <grimm-button block @click="showPopup(4)">top/right/bottom/left/center</grimm-button>
      </div>
      <div>
        <grimm-extend-popup content="click here hide" ref="extendPopup"></grimm-extend-popup>
        <grimm-button block @click="$refs.extendPopup.show()">close popup</grimm-button>
      </div>
    </template>
  </grimm-page>
</template>

<script>
import GrimmPage from '../../components/GrimmPage.vue';
import GrimmButtonGroup from '../../components/GrimmButtonGroup.vue';
import GrimmExtendPopup from '../../components/ExtendPopup.vue';
const positions = ['top', 'right', 'bottom', 'left', 'center'];
let cur = 0;
export default {
  data() {
    return {
      type: 'popup-dialog',
      mask: true,
      visible1: false,
      visible2: false,
      visible3: false,
      visible4: false,
      position: '',
    };
  },
  methods: {
    showPopup(i) {
      if (i === 4) {
        this.position = positions[cur++];
        if (cur === positions.length) {
          cur = 0;
        }
      }
      this['visible' + i] = true;
      setTimeout(() => {
        this['visible' + i] = false;
      }, 2000);
    },
  },
  components: {
    GrimmButtonGroup,
    GrimmPage,
    GrimmExtendPopup,
  },
};
</script>

<style lang="stylus" >
.popup-view {
  .content > div {
    margin: 10px 0;
  }
}

.grimm-my-popup {
  .grimm-popup-center {
    .grimm-popup-content {
      padding: 20px;
    }
  }

  .grimm-popup-content {
    padding: 80px 20px;
    color: #fff;
    background-color: rgba(0, 0, 0, 0.8);
    border-radius: 4px;
  }
}

.grimm-extend-popup {
  .grimm-extend-popup-content {
    padding: 20px;
    color: #fff;
    background-color: rgba(0, 0, 0, 0.8);
  }
}
</style>
